<template>
  <div class="liteflow-editor-breadcrumb">
    <div class="breadcrumb-container">
      <span 
        v-for="(item, index) in breadcrumbItems" 
        :key="index"
        class="breadcrumb-item"
        :class="{ active: index === breadcrumbItems.length - 1 }"
        @click="handleBreadcrumbClick(item, index)"
      >
        {{ item.name }}
        <span v-if="index < breadcrumbItems.length - 1" class="separator">/</span>
      </span>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';

export default {
  name: 'Breadcrumb',
  props: {
    flowGraph: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      breadcrumbItems: []
    };
  },
  mounted() {
    this.initGraphListeners();
    this.updateBreadcrumb();
  },
  beforeDestroy() {
    this.removeGraphListeners();
  },
  methods: {
    initGraphListeners() {
      if (this.flowGraph) {
        this.flowGraph.on('cell:selected', this.handleNodeSelected);
        this.flowGraph.on('blank:clicked', this.handleBlankClicked);
      }
    },
    removeGraphListeners() {
      if (this.flowGraph) {
        this.flowGraph.off('cell:selected', this.handleNodeSelected);
        this.flowGraph.off('blank:clicked', this.handleBlankClicked);
      }
    },
    handleNodeSelected({ cell }) {
      if (cell.isNode()) {
        this.updateBreadcrumb(cell);
      }
    },
    handleBlankClicked() {
      this.updateBreadcrumb();
    },
    updateBreadcrumb(selectedCell) {
      this.breadcrumbItems = [];
      
      if (selectedCell) {
        const data = selectedCell.getData();
        if (data && data.model) {
          this.buildBreadcrumb(data.model);
        }
      }
      
      // 如果没有选中节点，显示根节点
      if (this.breadcrumbItems.length === 0) {
        this.breadcrumbItems.push({
          name: '根节点',
          model: null
        });
      }
    },
    buildBreadcrumb(model, items = []) {
      if (!model) return;
      
      const item = {
        name: this.getNodeDisplayName(model),
        model: model
      };
      
      items.unshift(item);
      
      if (model.parent) {
        this.buildBreadcrumb(model.parent, items);
      }
      
      this.breadcrumbItems = items;
    },
    getNodeDisplayName(model) {
      if (model.id) {
        return model.id;
      }
      
      // 根据节点类型返回显示名称
      const typeNames = {
        'CHAIN': '流程',
        'THEN': '串行编排',
        'WHEN': '并行编排',
        'SWITCH': '选择编排',
        'IF': '条件编排',
        'FOR': '循环编排',
        'WHILE': '循环条件',
        'NodeComponent': '普通组件',
        'NodeBooleanComponent': '布尔组件',
        'NodeVirtualComponent': '虚节点'
      };
      
      return typeNames[model.type] || model.type || '未知节点';
    },
    handleBreadcrumbClick(item, index) {
      if (item.model) {
        // 高亮对应的节点
        this.highlightNode(item.model);
      }
    },
    highlightNode(model) {
      // 清除之前的高亮
      this.flowGraph.getNodes().forEach(node => {
        node.removeClass('highlighted');
      });
      
      // 高亮当前节点
      const nodes = model.getNodes();
      nodes.forEach(node => {
        node.addClass('highlighted');
      });
      
      // 居中显示
      if (nodes.length > 0) {
        this.flowGraph.centerCell(nodes[0]);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.liteflow-editor-breadcrumb {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.breadcrumb-item {
  cursor: pointer;
  transition: color 0.2s;
  
  &:hover {
    color: #1890ff;
  }
  
  &.active {
    color: #1890ff;
    font-weight: 500;
  }
}

.separator {
  margin: 0 4px;
  color: #ccc;
}
</style> 